﻿@page "/tables"

<h1>Tables</h1>

<div class="docs-example">
    <BSTable>
        <BS_thead>
            <BS_tr>
                <BS_th scope="col">#</BS_th>
                <BS_th scope="col">First</BS_th>
                <BS_th scope="col">Last</BS_th>
                <BS_th scope="col">Handle</BS_th>
            </BS_tr>
        </BS_thead>
        <BS_tbody>
            <BS_tr>
                <BS_th scope="row">1</BS_th>
                <BS_td>Mark</BS_td>
                <BS_td>Otto</BS_td>
                <BS_td>@@mdo</BS_td>
            </BS_tr>
            <BS_tr>
                <BS_th scope="row">2</BS_th>
                <BS_td>Jacob</BS_td>
                <BS_td>Thornton</BS_td>
                <BS_td>@@fat</BS_td>
            </BS_tr>
            <BS_tr>
                <BS_th scope="row">3</BS_th>
                <BS_td>Larry</BS_td>
                <BS_td>the Bird</BS_td>
                <BS_td>@@twitter</BS_td>
            </BS_tr>
        </BS_tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables1.html" />

<h3>Inverted Color</h3>
<div class="docs-example">
    <BSTable IsDark="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables2.html" />

<h3>Table head options</h3>
<div class="docs-example">
    <BSTable>
        <BSTableHead TableHeadType="TableHeadType.Dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </BSTableHead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
    <BSTable>
        <BSTableHead TableHeadType="TableHeadType.Light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </BSTableHead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables3.html" />

<h3>Striped rows</h3>
<div class="docs-example">
    <BSTable IsStriped="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables4.html" />

<div class="docs-example">
    <BSTable IsStriped="true" IsDark="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables5.html" />

<h3>Bordered table</h3>

<div class="docs-example">
    <BSTable IsBordered="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables6.html" />

<div class="docs-example">
    <BSTable IsBordered="true" IsDark="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables7.html" />

<h3>Borderless table</h3>

<div class="docs-example">
    <BSTable IsBorderless="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables8.html" />

<div class="docs-example">
    <BSTable IsBorderless="true" IsDark="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables9.html" />

<h3>Hoverable rows</h3>

<div class="docs-example">
    <BSTable IsHoverable="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables10.html" />

<div class="docs-example">
    <BSTable IsHovarable="true" IsDark="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables11.html" />

<h3>Small table</h3>

<div class="docs-example">
    <BSTable IsSmall="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables12.html" />

<div class="docs-example">
    <BSTable IsSmall="true" IsDark="true">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@@twitter</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables13.html" />

<h3>Contextual classes</h3>

<div class="docs-example">
    <BSTable>
        <thead>
            <tr>
                <BSTableHeadCell Color="Color.Active">Head</BSTableHeadCell>
                <BSTableHeadCell>Head</BSTableHeadCell>
                <BSTableHeadCell Color="Color.Primary">Head</BSTableHeadCell>
                <BSTableHeadCell Color="Color.Secondary">Head</BSTableHeadCell>
                <BSTableHeadCell Color="Color.Success">Head</BSTableHeadCell>
                <BSTableHeadCell Color="Color.Danger">Head</BSTableHeadCell>
                <BSTableHeadCell Color="Color.Warning">Head</BSTableHeadCell>
                <BSTableHeadCell Color="Color.Info">Head</BSTableHeadCell>
                <BSTableHeadCell Color="Color.Light">Head</BSTableHeadCell>
                <BSTableHeadCell Color="Color.Dark">Head</BSTableHeadCell>
            </tr>
        </thead>
        <tbody>
            <tr>
                <BSTableCell Color="Color.Active">Cell</BSTableCell>
                <BSTableCell>Cell</BSTableCell>
                <BSTableCell Color="Color.Primary">Cell</BSTableCell>
                <BSTableCell Color="Color.Secondary">Cell</BSTableCell>
                <BSTableCell Color="Color.Success">Cell</BSTableCell>
                <BSTableCell Color="Color.Danger">Cell</BSTableCell>
                <BSTableCell Color="Color.Warning">Cell</BSTableCell>
                <BSTableCell Color="Color.Info">Cell</BSTableCell>
                <BSTableCell Color="Color.Light">Cell</BSTableCell>
                <BSTableCell Color="Color.Dark">Cell</BSTableCell>
            </tr>
            <BSTableRow Color="Color.Active">
                <td colspan="10">Cell</td>
            </BSTableRow>
            <BSTableRow>
                <td colspan="10">Cell</td>
            </BSTableRow>
            <BSTableRow Color="Color.Primary">
                <td colspan="10">Cell</td>
            </BSTableRow>
            <BSTableRow Color="Color.Secondary">
                <td colspan="10">Cell</td>
            </BSTableRow>
            <BSTableRow Color="Color.Success">
                <td colspan="10">Cell</td>
            </BSTableRow>
            <BSTableRow Color="Color.Danger">
                <td colspan="10">Cell</td>
            </BSTableRow>
            <BSTableRow Color="Color.Warning">
                <td colspan="10">Cell</td>
            </BSTableRow>
            <BSTableRow Color="Color.Info">
                <td colspan="10">Cell</td>
            </BSTableRow>
            <BSTableRow Color="Color.Light">
                <td colspan="10">Cell</td>
            </BSTableRow>
            <BSTableRow Color="Color.Dark">
                <td colspan="10">Cell</td>
            </BSTableRow>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables14.html" />

<h3>Responsive table</h3>

<div class="docs-example">
    <BSTable IsResponsive="true">
        <thead>
            <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </tbody>
    </BSTable>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables15.html" />

<h3>Data Templated Table</h3>
<BSDataTable Items="Samples1" Context="sample" IsResponsive="true" IsStriped="true">
    <HeaderTemplate>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <th scope="row">@sample.Id</th>
        <td>@sample.FirstName</td>
        <td>@sample.LastName</td>
        <td>@sample.Handle</td>
    </ItemTemplate>
</BSDataTable>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables16.html" />

<h3>Data Templated Table Loading Example</h3>
<BSDataTable Items="Samples2" Context="sample" IsResponsive="true" IsStriped="true">
    <HeaderTemplate>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </HeaderTemplate>
    <LoadingTemplate>
        <td colspan="4">Loading ...</td>
    </LoadingTemplate>
    <ItemTemplate>
        <th scope="row">@sample.Id</th>
        <td>@sample.FirstName</td>
        <td>@sample.LastName</td>
        <td>@sample.Handle</td>
    </ItemTemplate>
</BSDataTable>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables17.html" />

<h3>Data Templated Table No Content Example</h3>
<BSDataTable Items="Samples3" Context="sample" IsResponsive="true" IsStriped="true">
    <HeaderTemplate>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </HeaderTemplate>
    <NoDataTemplate>
        <td colspan="4">No Data Available</td>
    </NoDataTemplate>
    <ItemTemplate>
        <th scope="row">@sample.Id</th>
        <td>@sample.FirstName</td>
        <td>@sample.LastName</td>
        <td>@sample.Handle</td>
    </ItemTemplate>
</BSDataTable>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables18.html" />

<h3>Data Sortable Templated Table</h3>
<BSDataTable Items="Samples1" Context="sample" IsResponsive="true" IsStriped="true" @ref="SortableRef">
    <HeaderTemplate>
        <tr>
            <th scope="col" ><a href="javascript:void(0)" @onclick="@(() => SortableRef.Sort("Id"))" @onclick:preventDefault>#</a></th>
            <th scope="col"><a href="javascript:void(0)" @onclick="@(() => SortableRef.Sort("FirstName"))" @onclick:preventDefault>First</a></th>
            <th scope="col"><a href="javascript:void(0)" @onclick="@(() => SortableRef.Sort("LastName"))" @onclick:preventDefault>Last</a></th>
            <th scope="col"><a href="javascript:void(0)" @onclick="@(() => SortableRef.Sort("Handle"))" @onclick:preventDefault>Handle</a></th>
        </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <th scope="row">@sample.Id</th>
        <td>@sample.FirstName</td>
        <td>@sample.LastName</td>
        <td>@sample.Handle</td>
    </ItemTemplate>
</BSDataTable>
<PrettyCode CodeFile="_content/SampleCore/snippets/tables/tables19.html" />

@code
{

    public List<SampleData> Samples1 { get; set; }
    public List<SampleData> Samples2 { get; set; } // Never initialized for loading screen
    public List<SampleData> Samples3 { get; set; }
    private BSDataTable<SampleData> SortableRef { get; set; }
    protected override void OnInitialized()
    {
        Samples1 = new List<SampleData>();
        Samples3 = new List<SampleData>(); // No data

        Samples1.Add(new SampleData()
        {
            Id = 1,
            FirstName = "Mark",
            LastName = "Otto",
            Handle = "@@mdo"
        });

        Samples1.Add(new SampleData()
        {
            Id = 2,
            FirstName = "Jacob",
            LastName = "Thornton",
            Handle = "@@fat"
        });

        Samples1.Add(new SampleData()
        {
            Id = 3,
            FirstName = "Larry",
            LastName = "the Bird",
            Handle = "@@twitter"
        });
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Handle { get; set; }
    }
}